<template>
    <el-tree
        class="tree"
        :data="[model]"
        :props="treeProps"
        node-key="id"
        :expand-on-click-node="false"
        default-expand-all
        :key="key"
        @node-contextmenu="handleContextMenu"
        @current-change="currentChanged"
    >
        <template #default="{ data }">
            <span>{{ data.name || "页面" }}</span>
            <el-icon v-if="data.hide" class="ml-1" @click.stop="show(data)"><Hide /></el-icon>
        </template>
    </el-tree>

    <CmpMenus v-model="model" ref="menuRef" @change="change" />
</template>
<script setup>
import * as uuid from "uuid";
import CmpMenus from "./cmp-menus.vue";

const treeProps = {};
const key = ref(uuid.v4());
const model = defineModel();
const menuRef = ref();
const emits = defineEmits(["change", "currentChange"]);

function reload() {
    key.value = uuid.v4();
}

function change() {
    reload();
    emits("change");
}

function handleContextMenu(e, data) {
    menuRef.value.show(e, data);
}

function currentChanged(e) {
    emits("currentChange", e);
}

function show(item) {
    item.hide = false;
}

defineExpose({ reload });
</script>

<style lang="scss" scoped>
.tree {
    background: transparent;
    --el-tree-node-content-height: 36px;

    :deep() {
        .el-tree-node__content:hover {
            color: var(--primary_color);
        }

        .is-current {
            .el-tree-node__content {
                color: var(--primary_color);
                font-weight: bold;
            }
        }
    }
}
</style>
